define(['jquery', 'bootstrap', 'backend', 'table', 'form','vue','qrcode'], function ($, undefined, Backend, Table, Form,Vue,qrcode) {
    var temple_id = Config.temple_id;
    var content_item_component = Vue.component('content_item_component',{
        props: ['index','content'],

        template:'#content_item',
        data: function () {
            return {
                myContent: this.content
            };
        },
        watch: {
            content:function(val) {
                this.myContent = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            myContent:function(val){
                this.$emit("on-content-change",val,this.index);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods:{
            delContentByComponent : function(index){
                console.info('del:'+index);
                delContentItem(index);
            }
        }
    });
    var solve_note_item_component = Vue.component('solve_note_item_component',{
        props: ['index','content','type','type_list'],
        template:'#solve_note_item',
        data: function () {
            return {
                myContent: this.content,
                myType: this.type
            };
        },
        watch: {
            content:function(val) {
                this.myContent = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            type:function (val) {
                this.myType = val;
            },
            myContent:function(val){
                this.$emit("on-solve-content-change",val,this.index);//③组件内对myResult变更后向外部发送事件通知
            },
            myType:function(val){
                this.$emit("on-type-change",val,this.index);//③组件内对myResult变更后向外部发送事件通知
            }
        },
        methods:{
            delSolveNoteByComponent : function(index){
                console.info('del:'+index);
                delSolveNote(index);
            }
        }
    });
    var vue = new Vue({
        el:'#component_div',
        data:{
            content_list : [],
            solve_note_list : [],
            type_list : [],
            component_id : 0,
            solve_note_component_id : 0,

        },mounted:function(){
            Form.api.bindevent($("form[role=form]"));
        },
        methods: {
            addContentItem: function (component) {   //添加选项
                var item = {
                    'component': component,
                    'index' : this.component_id,
                    'content' : '',
                };
                item.component = 'content_item_component';
                this.content_list.push(item);
                this.component_id++;
            },
            addSolveNoteItem: function (component) {   //添加选项
                var item = {
                    'component': component,
                    'index' : this.solve_note_component_id,
                    'content' : '',
                    'type' : '',
                    'type_list':this.type_list
                };
                item.component = 'solve_note_item_component';
                this.solve_note_list.push(item);
                this.solve_note_component_id++;
            },
            onContentChange : function(val,index){
                var array = this.content_list;
                for(var i=0;i<array.length;i++){
                    var item = array[i];
                    if(item.index == index){
                        item.content = val;
                    }
                }
            },
            onSolveNoteContentChange : function(val,index){
                var array = this.solve_note_list;
                for(var i=0;i<array.length;i++){
                    var item = array[i];
                    if(item.index == index){
                        item.content = val;
                    }
                }
            },
            onTypeChange : function(val,index){
                var array = this.solve_note_list;
                for(var i=0;i<array.length;i++){
                    var item = array[i];
                    if(item.index == index){
                        item.type = val;
                    }
                }
            },
        },
        components: {
            'content_item_component': content_item_component,
            'solve_note_item_component': solve_note_item_component
        }
    });

    function delContentItem(id){
        var array = vue.content_list;
        for(var i=0;i<array.length;i++){
            var item = array[i];
            if(item.index == id){
                array.splice(i,1);
            }
        }
    }
    function delSolveNote(id) {
        var array = vue.solve_note_list;
        for(var i=0;i<array.length;i++){
            var item = array[i];
            if(item.index == id){
                array.splice(i,1);
            }
        }
    }
    function getSolveNoteTypeList() {
        $.get('note/solve_note_type_list', function (res) {
            vue.type_list = res;
        }, 'json');
    }
    function getSolveNoteList(note_id) {
        $.post('note/getSolveNoteList', {note_id:note_id}, function (res) {
            for (var i = 0; i < res.length; i++) {
                var item = res[i];
                item.index = i;
                item.component = 'solve_note_item_component';
                item.solve_note_component_id = i;
                item.type = item.type_id;
                item.type_list = vue.type_list;
                vue.solve_note_list.push(item);
            }
            console.info(vue.solve_note_list);
            vue.solve_note_component_id = res.length;
        }, 'json');
    }
    var Controller = {

        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'note/index/ids/'+temple_id,
                    add_url: 'note/add/temple_id/'+temple_id,
                    edit_url: 'note/edit',
                    del_url: 'note/del',
                    multi_url: 'note/multi',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                columns: [
                    [
                        {field: 'state', checkbox: true },
                        {field: 'id', title: 'ID'},
                        {field: 'name', title: __('Name')},
                        {field: 'desc', title: __('Desc')},
                        {field: 'solve_note_text', title: __('Solve note'), operate:false, formatter: Table.api.formatter.label},
                        {field: 'content_text', title: __('Content'), operate:false, formatter: Table.api.formatter.label},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
                            buttons: [{
                                name: 'detail',
                                text: __('Qr code'),
                                icon: 'fa fa-list',
                                classname: 'btn btn-info btn-xs btn-detail btn-topic-list btn-dialog',
                                url:'note/qr_code'
                            }],
                            formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Form.api.bindevent($("form[role=form]"));
            getSolveNoteTypeList();
        },
        edit: function () {
            var note_id = Config.note_id;
            $.post('note/getContentList', {note_id:note_id}, function (res) {
                for (var i = 0; i < res.length; i++) {
                    var item = res[i];
                    item.index = i;
                    item.component = 'content_item_component';
                    item.component_id = i;
                    vue.content_list.push(item);
                }
                vue.component_id = res.length;
            }, 'json');
            $.get('note/solve_note_type_list', function (res) {
                vue.type_list = res;
                getSolveNoteList(note_id);
            }, 'json');
            Form.api.bindevent($("form[role=form]"));
        },
        qr_code : function () {
            var note_id = Config.note_id;
            var host = Config.host;
            $('#qr_code').qrcode(host+'/index/we_chat/bindNote?note_id='+note_id);
        }
    };
    return Controller;
});